<template>
    <div class="form">
        <section class="body">
            <p class="hedd-text">目标金额</p>
            <van-field v-model="money" required placeholder="请输入需要多少元钱治病(随时可提现)" maxlength="8" />
            <p class="hedd-text">
                筹款标题
                <i @click="text01=!text01">怎么写标题？</i>
            </p>
            <div class="text-more" v-show="text01">
                <p>标题尽量突出自身特点，好的标题能让筹款速度加倍</p>
                <h3>示例一(年龄)</h3>
                <p>求求大家帮帮我，别让病魔抢走我3岁的孩子</p>
                <h3>示例二(家乡)</h3>
                <p>×市的父老相亲请伸出援手，救救这个15岁的花季少女</p>
                <h3>示例三(学校)</h3>
                <p>x大学的xx突发急性白血病，恳请大家伸出援手</p>
            </div>
            <van-field v-model="title" required placeholder="简单描述患者的情况(25字以内)" maxlength="25" />
            <p class="hedd-text">
                求助说明
                <i @click="text02=!text02">怎么写求助说明？</i>
            </p>
            <div class="text-more" v-show="text02">
                <p>建议包含下面三部分内容</p>
                <h3>个人情况</h3>
                <p>建议包含姓名、年龄、所在地区/学校等信息；比如，我叫x，今年15岁，家住在x省x市x县，是x学校的学生</p>
                <h3>患病情况</h3>
                <p>建议包含确诊时间、确诊医院、疾病名称、已花费多少钱、还需花费多少钱。今年x月x日，突然发烧，好多天不见好转，在x医院确诊为x病。已经花了x元，花光了家庭的积蓄，还差x元，希望大家伸出援手</p>
                <h3>求助呼吁</h3>
                <p>恳求大家帮帮我</p>
            </div>
            <div class="textarea">
                <van-field
                    v-model="message"
                    rows="6"
                    autosize
                    type="textarea"
                    maxlength="1000"
                    placeholder="各位好心人，你们好，很幸运能遇到大家。我叫XX，今年XX岁，刚被医生确诊为XX疾病，面对病魔我感受到了从未有过的压力，只能竭尽所能的治疗。但是平时积蓄不多，加上亲戚朋友凑来的钱也还是杯水车薪，此次也是万般无奈才向各位好心人求助，恳求大家帮帮我！"
                    show-word-limit
                />
            </div>

            <p class="hedd-text">
                添加图片
                <span>（选填、没有照片也可发起筹款）</span>
            </p>
            <div class="imgbox-info">
                <p>
                    根据对以往成功筹款案例的分析，
                    <span>建议您第一张上传患者积极阳光\乐观向上的医院治疗照（如面带微笑的治疗照）</span>，更易获得广大爱心人士的捐助，更快筹到治病钱
                </p>
            </div>
            <uploader type="fundraising" @setimg="setimg" :length="5"/>
            <p class="hedd-text">我承诺</p>
            <ul class="promise">
                <li>
                    <p>1. 发起的项目类型为个人大病求助，所筹款项将全部用于受助人的治疗及康复。</p>
                </li>
                <li>
                    <p>2. 提交的求助信息完整、真实、合理，不存在任何虚构、虚伪和隐瞒的情况。</p>
                </li>
                <li>
                    <p>3. 积极配合赐予人及平台的要求，说明受助人疾病情况、治疗花费、家庭经济情况等，并提供相应证明材料。</p>
                </li>
                <li>
                    <p>* 若有违背，愿承担全部法律责任，并赔偿相关方所有损失。</p>
                </li>
            </ul>
        </section>
        <div class="agreement-box">
            <van-checkbox v-model="checked" checked-color="#ff5e10">
                <p>
                    我已阅读并同意
                    <span @click.stop="showpopup(1)">《个人求助信息发布条款》</span>
                    <span @click.stop="showpopup(2)">《隐私协议》</span>和
                    <span @click.stop="showpopup(3)">《用户协议》</span>
                </p>
            </van-checkbox>
        </div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '70%' }">
            <geren v-if="type==1" />
            <yinsi v-if="type==2" />
            <yonghu v-if="type==3" />
        </van-popup>
        <!-- <div class="blue-flexbox">
            <img src="@/assets/white-list.png" class="heart" />
            <p>不会写？填写基本信息后我们为您智能补全筹款信息</p>
            <img src="@/assets/right-arrow.png" class="closethis" />
        </div>-->
        <footer class="footer">
            <van-button
                type="primary"
                :disabled="!checked"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >提交</van-button>
        </footer>
    </div>
</template>

<script>
import {
    Cell,
    CellGroup,
    Field,
    Button,
    Checkbox,
    Popup,
    Toast
} from "vant";
import { Initiate } from "@/api/api";
import uploader from "@/components/uploader";
import geren from "@/components/geren";
import yinsi from "@/components/yinsi";
import yonghu from "@/components/yonghu";
export default {
    name: "Initiate",
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button,
        [Checkbox.name]: Checkbox,
        [Popup.name]: Popup,
        uploader,
        geren,
        yinsi,
        yonghu
    },
    data() {
        return {
            title: "",
            money: "",
            message: "",
            checked: false,
            fileList: [],
            text01: false,
            text02: false,
            show: false,
            type: ""
        };
    },
    methods: {
        showpopup(e) {
            this.type = e;
            this.show = true;
        },
        setimg(img){
            this.fileList.push(img)
        },
        submit() {
            if (this.money == "") {
                Toast("请输入需要花费的金额");
                return false;
            } else if (this.title == "") {
                Toast("请输入筹款标题");
                return false;
            } else if (this.message == "") {
                Toast("请输入求助说明");
                return false;
            }
            Initiate({
                prepare_money: this.money,
                prepare_title: this.title,
                prepare_describe: this.message,
                images: this.fileList.join(",")
            }).then(res => {
                if (res.code) {
                    Toast("成功");
                    this.$router.push({
                        path: "/Promoter",
                        query: { id: res.results.prepare_id }
                    });
                }
            });
        }
    }
};
</script>
<style scoped>
.imgbox-info p {
    font-size: 0.67rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.56);
    line-height: 1rem;
}
.imgbox-info p span {
    color: #ff3c3c;
    font-weight: bold;
}
.agreement-box {
    padding: 0 1.3rem;
    margin-bottom: 9.3rem;
    margin-top: 1.33333333rem;
    position: relative;
}
.agreement-box .agreement-icon {
    position: absolute;
    left: 1.38rem;
    top: 0rem;
    width: 0.89rem;
    height: 0.89rem;
    display: block;
}
.agreement-box p {
    font-size: 0.67rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 0.94rem;
}
.agreement-box p span {
    color: #ff3c3c;
}

.blue-flexbox {
    position: fixed;
    box-sizing: border-box;
    bottom: 4rem;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 0.89rem;
    width: 91.4%;
    height: 3.1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0.56rem 2.5rem 0.67rem 3.56rem;
    z-index: 999;
}
.blue-flexbox .heart {
    position: absolute;
    width: 1.78rem;
    height: 1.78rem;
    top: 0.67rem;
    left: 0.89rem;
}
.blue-flexbox .closethis {
    position: absolute;
    width: 0.67rem;
    height: 0.67rem;
    right: 1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.blue-flexbox p {
    font-size: 0.67rem;
    font-weight: 400;
    color: #ff3c3c;
    line-height: 0.94rem;
}
</style>
